<template>
  <div>
    <!-- <Loading v-show="LOADING"></Loading> -->
    <nav-com
      title="商品详情"
      :showView="showView"
      @back="backHandler()"
    ></nav-com>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-collapse v-model="activeNames">
        <van-collapse-item
          title="提醒"
          name="2"
          icon="bell"
          title-class="lefttitle"
          class="bgtilte"
        >
          如果你的等级没有到一星网店级别，开通5G小店需要缴纳499元押金，共享13万私欲流量，可裂变13万人私域用户到微信朋友圈等，每人仅需分享100人，可以有1300万人
        </van-collapse-item>
      </van-collapse>
      <div class="d_top">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in list" :key="index">
            <img v-lazy="image" style="height: 220px" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="d_price">
        <div class="flex-between">
          <span><span style="font-size: 3.2vw">￥</span>{{ goodsPrice }}</span>
          <div class="d_pr_p">已售{{ details.sales }}</div>
        </div>
        <div class="flex-between share">
          <div class="left">
            <span
              style="
                font-size: 3.2vw;
                border-right: 1px solid #ccc;
                padding-right: 5px;
              "
              >赚￥ {{ details.share_money || "0.00" }}</span
            >
            <div class="" style="padding-left: 5px">
              {{ details.share + "%佣" }}
            </div>
          </div>
          <div class="right">
            <div class="share_num">{{ "已分享人数" + details.share_num }}</div>
          </div>
        </div>
        <p>{{ details.title }}</p>
        <div v-for="(s, i) in spu" :key="i" style="margin-top: 20px">
          <div class="d_pr_p">{{ s.name }}:</div>
          <div class="sku_list">
            <div
              class="sku_list_item"
              v-for="(item, index) in s.item.split(',')"
              :key="index"
              @click="spuClick(item, i)"
              :class="{ active: spuSelected[i] === item }"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <div style="height: 2.6vw; background: #f4f4f4"></div>
      <div class="list-item-top">
        <div class="left">
          <div class="author-img">
            <img :src="shopDetail.avatar" />
          </div>
          <div class="shop-info">
            <div class="name">{{ shopDetail.shopname }}</div>
            <div class="info">
              <img src="@/assets/shop/star.png" />
              {{ shopDetail.description }}
            </div>
          </div>
        </div>
        <div class="right" @click="toshopdetail(shopDetail)">进店逛逛</div>
      </div>
      <div style="height: 2.6vw; background: #f4f4f4"></div>
      <div class="other-info">
        <div class="category item">
          <span class="title">所属分类</span>
          <span class="value">{{ details.category }}</span>
        </div>
        <div class="discountRate item">
          <span class="title">折扣</span>
          <span class="value">{{ details.discountRate }}</span>
        </div>
        <div class="noDeliveryAreaNameString item">
          <span class="title">不包括地区</span>
          <span class="value">{{ details.noDeliveryAreaNameString }}</span>
        </div>
        <div class="nonPostalAreaNameString item">
          <span class="title">不邮寄地区</span>
          <span class="value">{{ details.nonPostalAreaNameString }}</span>
        </div>
      </div>
      <div style="height: 2.6vw; background: #f4f4f4"></div>
      <div class="details_title">
        <i></i>
        <span>商品详情</span>
      </div>
      <div class="d_details">
        <div class="card" v-if="details.is_dx == 1 && detailImages.length > 0">
          <img
            v-lazy="image"
            class="img"
            v-for="(image, index) in detailImages"
            :key="index"
          />
        </div>
        <div class="card" v-else v-html="details.content"></div>
      </div>

      <div class="d_height"></div>
    </van-pull-refresh>
    <div class="d_bottom">
      <div class="d_display">
        <div @click.stop="toshowShare()" class="d_btn share_btn">分享赚钱</div>
        <div @click="pay" class="d_btn">立即购买</div>
      </div>
    </div>
    <!-- 分享二维码 -->
    <div class="shareboxbg" v-show="showSharetu">
      <div class="sharebox">
        <div class="shareTU">
          <div class="tu">
            <img :src="details.image" />
          </div>
          <div class="price">
            <span class="t00">¥{{ goodsPrice }}</span>
          </div>
          <div class="name">{{ details.title }}</div>
          <div class="ewm">
            <img :src="img_url" />
            <span>长按或扫描二维码查看详情</span>
          </div>
        </div>
        <div class="shareStyList">
          <div class="t0">分享当前图片到</div>
          <div class="styList">
            <div class="item" @click.stop="togo(1)">
              <img src="@/assets/friendShare/tu1.png" />
              <span>微信好友</span>
            </div>
            <div class="item" @click.stop="togo(2)">
              <img src="@/assets/friendShare/tu2.png" />
              <span>朋友圈</span>
            </div>
            <div class="item" @click.stop="togo(3)">
              <img src="@/assets/friendShare/tu3.png" />
              <span>保存海报</span>
            </div>
            <div class="item" @click.stop="togo(4)">
              <img src="@/assets/friendShare/tu4.png" />
              <span>复制链接</span>
            </div>
          </div>
          <div class="cancle" @click.stop="share_close">取消</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import {
  friendgoodsdetail,
  yiPayTip,
  shopdetail,
  qrcodegoods,
} from "@/api/api";
import { Toast } from "vant";
import VUE_APP_BASE_API_5G from '@/api/http5g.js'
export default {
  setup() {
    const activeNames = ref(["1"]);
    return { activeNames };
  },

  name: "odersDetails",
  components: {
    navCom,
    Loading,
  },
  data() {
    return {
      detailsId: "",
      showView: true,
      isLoading: false,
      list: [],
      details: {},
      LOADING: false,
      spuSelected: [],
      sku: [],
      spu: [],
      shopDetail: {},
      detailImages: [],
      selectedGoods: {},
      typeshop: "normal",
      showSharetu: false, //分享控制
      img_url: "",
      h5_url: "",
      post_url: "",
    };
  },
  computed: {
    goodsPrice() {
      let goodsSku = this.spuSelected.join(",");
      this.selectedGoods = this.sku.find((s) => s.difference == goodsSku);
      if (this.selectedGoods) {
        return this.selectedGoods.price;
      } else {
        return this.details.price;
      }
    },
  },
  created() {
    console.log("========this.$route.params",this.$route)
  },
  mounted() {
    this.detailsId = this.$route.params.id;
    this.typeshop = this.$route.params.type
      ? this.$route.params.type
      : "normal";
    this.initDatails();
    if(this.$route.fullPath.indexOf('token')>0){
      let newarr = this.$route.fullPath.split('?')
      newarr.forEach((item)=>{
        if(item.indexOf('=')>0){
          let newall = item.split('&')
          let user_id = newall[1].split('=')
          localStorage.setItem("user_id",user_id[1])
          let tokens = newall[0].split('=')
          localStorage.setItem("token",tokens[1])
        }

      })
    }
    // this.isTip()

  },
  methods: {
    share_close() {
      this.showSharetu = false;
    },
    togo(type) {
      if (type == 1) {
        if (this.$is_weixn) {
          Toast("点击右上角“...”分享");
        } else if (weixin.isAndroid() && window.JS_TROOPS) {
          window.JS_TROOPS.weixinShare(this.post_url);
        } else {
          Toast("浏览器不支持");
        }
      } else if (type == 2) {
        if (this.$is_weixn) {
          Toast("点击右上角“...”分享");
        } else if (weixin.isAndroid() && window.JS_TROOPS) {
          window.JS_TROOPS.weixinCircleFriends(this.post_url);
        } else {
          Toast("浏览器不支持");
        }
      } else if (type == 3) {
        if (this.$is_weixn) {
          Toast("点击右上角“...”分享");
        } else if (weixin.isAndroid() && window.JS_TROOPS) {
          window.JS_TROOPS.downloadImage(this.post_url);
        } else {
          Toast("浏览器不支持");
        }
      } else if (type == 4) {
        this.copy(this.h5_url);
      }
    },
    copy(content) {
      const inputDom = document.createElement("input");
      inputDom.setAttribute("value", content);
      document.body.appendChild(inputDom);
      inputDom.select();
      document.execCommand("copy");
      document.body.removeChild(inputDom);
      Toast("复制成功");
    },
    toshowShare() {
      // Toast('二维码分享页面展示')
      if (localStorage.getItem("token5g")) {
        let index = window.location.href.toString().indexOf("/#/");
        let yuming = window.location.href.toString().substring(0, index);
        qrcodegoods({
          link: yuming,
          token: localStorage.getItem("token5g"),
          goods_id: this.detailsId,
        }).then((res) => {
          this.showtank = false;
          this.showSharetu = true;
          console.log("二维码分享", res.data);
          this.img_url = res.data.data.img_url;
          this.h5_url = res.data.data.h5_url;
          this.post_url = res.data.data.poster_url;
        });
      } else {
        if (this.$is_weixn) {
          this.$router.push("/register_weixin");
        } else {
          this.$router.push("/login");
        }
      }
    },
    spuClick(item, i) {
      this.spuSelected[i] = item;
      this.spuSelected = JSON.parse(JSON.stringify(this.spuSelected));
    },
    isTip() {
      yiPayTip().then((res) => {
        if (res.data.data["status"] == "true") {
          this.$dialog
            .alert({
              title: "支付提示",
              message: "亲！您有未完成预付券支付的订单，请您及时支付，完成订单",
            })
            .then(() => {});
        }
      });
    },
    //返回
    backHandler() {
      if (weixin.isAndroid() && window.JS_TROOPS) {
        window.JS_TROOPS.goBack();
      } else {
        this.$router.go(-1);
      }
    },
    onRefresh() {
      this.isLoading = false;
    },
    //初始化
    initDatails() {
      this.LOADING = true;
      friendgoodsdetail({ id: this.detailsId }).then((res) => {
        this.LOADING = false;
        console.log(res);
        this.details = res.data.data;
        this.list = res.data.data.images ? res.data.data.images.split(",") : "";
        this.one_day = res.data.data.one_day || "0";
        this.sku = res.data.data.sku;
        this.spu = res.data.data.spu;
        this.spuSelected = this.spu.map(() => "");
        this.detailImages = this.details.content
          ? this.details.content.split(",")
          : "";
        this.getshopdetail();
      });
    },
    getshopdetail() {
      shopdetail({ id: this.details.shop_id }).then((res) => {
        if (res.data.code == 1) {
          if (res.data.data) {
            this.shopDetail = res.data.data;
          }
        }
      });
    },
    toshopdetail() {
      this.$router.push({
        name: "allshopgoods",
        params: { id: this.details.shop_id },
      });
    },
    //购买
    pay() {
      if (this.details.stock == 0) {
        Toast("亲，该商品已售完，已通知商家尽快补货，请选择其他商品。");
        return;
      }
      let flag = this.spuSelected.every((item) => !!item);
      console.log("this.spuSelected", this.selectedGoods);
      if (!flag) {
        Toast("请选择规格");
        return;
      }
      if(!localStorage.getItem("token")){
        this.$router.push({
          name: "register_weixin"
        });
        return;
      }
      if(this.$route.fullPath.indexOf('token')>0){
        this.$router.push({
          name: "shareorderConfirm",
          params: {
            id: this.detailsId,
            one_day: 0,
            sku_id: this.selectedGoods.id,
          },
        });
      }else{
        this.getopen_id()
      }

    },

    getopen_id(){
      if(!localStorage.getItem("token")){
        this.$router.push({
          name: "register_weixin"
        });
        return;
      }else{
        window.location.href = VUE_APP_BASE_API_5G.VUE_APP_BASE_API_5G + "api/user/get_back_url?id="+localStorage.getItem("user_id")+'&goods_id='+this.detailsId+'&token='+localStorage.getItem("token")
      }
    },
  },
};
</script>
<style scoped>
.card,
img,
div,
p {
  margin: 0;
  padding: 0;
  border: none;
}
.card >>> img {
  display: block;
  width: 100%;
  height: auto;
  float: left;
}
.d_top img {
  width: 100%;
}
.d_price {
  padding: 0 4vw 4vw;
  margin-top: 2.6vw;
}
.d_price .flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.d_price .share {
  background: rgba(241, 69, 55, 0.1);
  border-radius: 4px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #f14537;
  padding: 5px;
  margin: 8px 0;
}
.left {
  display: flex;
  align-items: center;
}
.d_price span {
  font-size: 5.6vw;
  color: #cb041c;
}
.details_title {
  font-size: 4.2vw;
  width: 100%;
  margin-left: 4vw;
  margin-top: 4vw;
  text-align: left;
}
.details_title i {
  width: 1.066vw;
  height: 4vw;
  background: #f7541c;
  margin-top: 1vw;
  margin-right: 1.3vw;
  display: block;
  float: left;
}
.details_title span {
  float: left;
  display: block;
}
.d_details {
  clear: both;
  padding: 10px 10px 50px;
}
.d_pr_p {
  font-size: 2.9vw;
  color: #999;
  margin-top: 2.6vw;
}
.sku_list .sku_list_item {
  background: #f8f8f8;
  border-radius: 3px;
  border: 1px solid #d1d2d5;
  padding: 6px;
  margin-top: 5px;
  display: inline-block;
  margin-right: 4px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 20px;
}
.sku_list .sku_list_item.active {
  background: #f4d8db;
  border: 1px solid #d62f34;
}
.list-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
}
.list-item-top .right {
  width: 80px;
  height: 26px;
  font-family: PingFangSC-Regular, PingFang SC;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 400;
  color: #fa2c1e;
  line-height: 26px;
  text-align: center;
  border: 1px solid #fa2c1e;
}
.list-item-top .left {
  display: flex;
  align-items: center;
}
.list-item-top .left .author-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-right: 6px;
}
.author-img img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.shop-info .name {
  font-size: 13px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 550;
  color: #222222;
  line-height: 25px;
}
.shop-info .info {
  font-size: 11px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #949391;
  line-height: 16px;
  display: flex;
  align-items: center;
}
.shop-info .info img {
  width: 16px;
  margin-right: 5px;
}
.details_img img {
  width: 100%;
}
.d_height {
  height: 18.66vw;
}
.d_bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18.66vw;
  background: #fff;
  height: 18.66vw;
}
.d_display {
  margin: 3.3vw;
  width: auto;
  display: flex;
}
.share_btn {
  margin-right: 30px;
}
.d_btn {
  width: 94.66vw;
  height: 12vw;
  line-height: 12vw;
  font-size: 4vw;
  background: #d62f34;
  border-radius: 6vw;
  text-align: center;
  color: #fff;
}
.other-info {
  padding: 10px;
  font-size: 13px;
  background-color: #fff;
}
.other-info .item {
  line-height: 30px;
}
.other-info .title {
  display: inline-block;
  color: #b7b8b6;
  width: 80px;
  text-align: justify;
  /* text-align-last: justify;
    margin-right: 15px; */
}
.bgtilte {
  background: linear-gradient(180deg, #ef4134 0%, #f87664 100%) !important;
}
/deep/.van-cell {
  background: linear-gradient(180deg, #ef4134 0%, #f87664 100%) !important;
  color: #fff;
}
/deep/.van-cell__right-icon {
  color: #fff;
}
/deep/.van-collapse-item__content {
  background: linear-gradient(180deg, #ef4134 0%, #f87664 100%) !important;
  color: #fff;
  border-bottom: none;
}
/deep/.van-cell::after {
  border-bottom: none;
}
.shareboxbg {
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.sharebox .shareTU {
  background: #ffffff;
  height: 325px;
  width: 250px;
  padding: 10px;
  border-radius: 12px;
  z-index: 10;
  position: absolute;
  bottom: 170px;
  left: calc(50% - 135px);
}
.sharebox .shareTU .tu img {
  width: 250px;
  max-height: 130px;
}
.sharebox .shareTU .price {
  margin: 10px 0;
}
.sharebox .shareTU .price .t00 {
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fa2c1e;
  line-height: 25px;
  margin-right: 10px;
}
.sharebox .shareTU .price .t01 {
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 21px;
  text-decoration: line-through;
}
.sharebox .shareTU .name {
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 21px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sharebox .shareTU .ewm {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sharebox .shareTU .ewm img {
  width: 77px;
  margin-bottom: 10px;
}
.sharebox .shareTU .ewm span {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 17px;
  display: block;
}
.shareStyList {
  clear: both;
  height: 150px;
  background: #f5f5f5;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-align: center;
  padding-top: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
}
.shareStyList .t0 {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 18px;
}
.styList {
  display: flex;
  justify-content: space-evenly;
  padding: 10px 0 15px;
}
.styList .item {
}
.styList .item img {
  width: 50px;
}
.styList .item span {
  font-size: 11px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 16px;
  display: block;
}
.shareStyList .cancle {
  background: #ffffff;
  line-height: 43px;
}
</style>
